<template>
    <!-- 第一步 -->
    <div class="tableSample">
      <!-- S 第一步上传信息 -->
      <div v-if="step === 1">
        <div class="header">
          <div class="header-left">
            <p class="title">信息导入
            </p>
          </div>
        </div>
        <v-excel @importRequest="importRequest" ></v-excel>
      </div>
      <!-- E 第一步上传信息 -->
      <!-- S 第二步选择图片信息 -->
      <div v-if="step === 2">
        <el-form label-width="120px">
          <div class="wrap" v-for="(item,index) in tableData" v-bind:key="index">
            <el-form-item label="图片">
              <div style="display: flex;flex-wrap: wrap;width: 100%;">
                <div class="imgs" v-for="(items,key) in item.imgs" v-bind:key="key">
                  <img :src="items.img.url" alt="图片" style="margin: 10px">
                </div>
                <el-button type="primary" @click.native="chooesImgs(index)" style="margin: 10px;height: 40px;" >选择图片</el-button>
              </div>
            </el-form-item>
            <el-form-item label="姓名" style="width: 50%;float: left;">
              <span>{{ item.name }}</span>
            </el-form-item>
            <el-form-item label="性别" style="width: 50%;float: left;">
              <span>{{ item.gender }}</span>
            </el-form-item>
            <el-form-item label="民族" style="width: 50%;float: left;">
              <span>{{ item.nation }}</span>
            </el-form-item>
            <el-form-item label="居住地" style="width: 50%;float: left;">
              <span>{{ item.residence }}</span>
            </el-form-item>
          </div>
          <!-- S 信息提交 -->
          <el-form-item class="submit">
            <el-button type="primary" @click="getValue()">保 存</el-button>
          </el-form-item>
          <!-- E 信息提交 -->
        </el-form>
      </div>
      <!-- E 第二步选择图片信息 -->
      <!-- S 选择图片弹框 -->
        <el-dialog title="图片列表" :visible.sync="outerVisible">
          <el-row>
            <el-col :span="6" v-for="(item, index) in imgAll" :key="index">
                <el-card :body-style="{ padding: '10px',position: 'relative' }">
                  <img :src="item.url" :class="item.check?'image image_active':'image'" @click="item.check = !item.check">
                  <img :src="backgroundImgUrl" alt="选中" class="bgImg" v-if="item.check">
                </el-card>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="clearChoiceImg">取 消</el-button>
            <el-button type="primary" @click="choiceImg">选择图片</el-button>
          </div>
        </el-dialog>
      <!-- E 选择图片弹框 -->
    </div>
</template>

<script>
import UserAuth from '@/models/user-auth'
import VExcel from '@/components/base/excel-pub'
import User from '@/lin/models/user'

export default {
  components: {
    VExcel,
  },
  data() {
    return {
      // eslint-disable-next-line global-require
      backgroundImgUrl: require('./../../assets/img/xuan.png'),
      tableData: [],
      imgAll: [],
      loading: false,
      outerVisible: false,
      lin_user_id: 0,
      step: 1,
      curr_index: 0,
    }
  },
  computed: {},
  created() {
    this.getImgAll()
    this.getAdminUser()
  },
  methods: {
    async getAdminUser() {
      const res = await User.getInformation()
      this.lin_user_id = res.linUserId
    },
    // 提交信息
    async getValue() {
      let img_status = false
      this.tableData.forEach((item) => {
        if (item.imgs.length === 0) {
          img_status = true
        }
      })
      if (img_status) {
        this.$message.error('请选择图片')
        return false
      }
      const res = await UserAuth.createData({ data: this.tableData })
      if (res.error_code === 0) {
        this.tableData = []
        this.step = 1
        this.$message.success(`${res.msg}`)
      }
    },
    choiceImg() {
      const res = this.imgAll
      const resArr = []
      res.forEach((item) => {
        if (item.check) {
          resArr.push({
            img: {
              url: item.url,
              path: item.path,
              extension: item.extension,
              md5: item.md5,
              name: item.name,
            },
          })
          // eslint-disable-next-line no-param-reassign
          item.check = false
        }
      })
      this.imgAll = res
      // this.tableData[this.curr_index].imgs = resArr
      this.tableData.forEach((item) => {
        // eslint-disable-next-line no-param-reassign
        item.imgs = resArr
      })
      this.outerVisible = false
    },
    clearChoiceImg() {
      const res = this.imgAll
      res.forEach((item) => {
        // eslint-disable-next-line no-param-reassign
        item.check = false
      })
      this.imgAll = res
      this.outerVisible = false
    },
    chooesImgs(index) {
      this.curr_index = index
      this.outerVisible = true
    },
    async getImgAll() {
      const res = await UserAuth.getImgAll()
      res.forEach((item) => {
        // eslint-disable-next-line no-param-reassign
        item.check = false
      })
      this.imgAll = res
    },
    async importRequest(obj) {
      if (obj.length === 0) {
        this.$message.error('导入信息为空')
        return false
      }
      const loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const data = []
      obj.forEach((item) => {
        data.push({
          name: item.姓名,
          gender: item.性别,
          nation: item.民族,
          residence: item.居住地,
          birthday: item.出生日期,
          constellation: item.星座,
          height: item.身高,
          weight: item.体重,
          marriage: item.婚姻状态,
          education: item.最高学历,
          unit_natures: item.单位性质,
          monthly_income: item.月收入,
          house: item.是否有房,
          car: item.是否有车,
          loan: item.是否有贷款,
          contact_type: item.联系方式类型,
          contact: item.联系方式,
          vip_status: item.vip推荐,
          imgs: [],
          lin_user_id: this.lin_user_id,
        })
      })
      this.tableData = data
      this.step = 2
      // const res = await member.excelMember({ items: data })
      // if (res.error_code === 0) {
      //   this.$message.success(`${res.msg}`)
      // }
      loading.close()
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;

                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    .wrap {
      padding: 20px;
      .imgs {
        display: flex;
        img{
          width: 200px;
        }
      }
    }
    .image{
      width: 100%;
      display: block;
      border:1px solid #999;
    }
    .image_active{
      border:1px solid #3963bc;
    }
    .el-col{
      margin-bottom: 20px;
    }
    .bgImg{
      position: absolute;
      bottom: -1px;
      right: -5px;
      width: 100px;
    }
</style>
